<script setup lang="ts">
  import { useRoute } from 'vue-router';
  const route = useRoute();
  const { file } = route.query;
  const fileType = ref(file.split('.')[file.split('.').length - 1]);
  onMounted(() => {});
  onUnmounted(() => {
    fileType.value = '';
  });

  import { ref } from 'vue';
  import { renderAsync } from 'docx-preview';

  const docxContainer = ref(null);

  const loadDocx = async () => {
    try {
      // 打印文件头，验证是否为ZIP格式
      const uint8 = new Uint8Array(arrayBuffer.slice(0, 4));
      console.log('文件头前4字节:', uint8);

      if (!(uint8[0] === 0x50 && uint8[1] === 0x4b)) {
        throw new Error('文件头不符合ZIP格式，非有效DOCX');
      }

      const blob = new Blob([arrayBuffer], {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      });

      await renderAsync(blob, docxContainer.value);
    } catch (error) {
      console.error('预览失败', error);
    }
  };
</script>

<template>
  <!-- 可以在这里使用组件 -->
  <div class="office-viewer">
    <div ref="docxContainer" class="docx-preview"></div>
    <!--    <VueOfficeDocx :src="file" v-if="fileType === 'docx'" />-->
    <!--    <VueOfficePdf :src="file" />-->
  </div>
</template>

<style scoped lang="less">
  /* 这里可以写组件的自定义样式 */
  .office-viewer {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  .docx-preview {
    border: 1px solid #ccc;
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
    background-color: white;
  }
</style>
